<template>
  <Layer :layer="layer" @confirm="submit">
    <el-form
        :model="ruleForm"
        :rules="rules"
        ref="form"
        label-width="120px"
    >
      <el-form-item label="菜单类型" prop="menuType">
        <el-radio-group v-model="ruleForm.menuType" size="small" style="width: 178px">
          <el-radio-button label="0">目录</el-radio-button>
          <el-radio-button label="1">菜单</el-radio-button>
          <el-radio-button label="2">外链</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="菜单状态" prop="status">
        <el-radio-group v-model="ruleForm.status" size="small" style="width: 178px">
          <el-radio-button label="false">关闭</el-radio-button>
          <el-radio-button label="true">显示</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-show="ruleForm.menuType == 1" label="菜单缓存" prop="status">
        <el-radio-group v-model="ruleForm.isCache" size="small" style="width: 178px">
          <el-radio-button label="false">关闭</el-radio-button>
          <el-radio-button label="true">启动</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="菜单排序" prop="weight">
        <el-input-number size="small" v-model.number="ruleForm.weight" :min="0" :max="999" controls-position="right"
                         style="width: 178px;"/>
      </el-form-item>
      <el-form-item label="菜单图标" prop="icon">
        <el-popover
            placement="bottom"
            :width="450"
            trigger="click"
        >
          <template #reference>
            <el-input v-model="ruleForm.icon" placeholder="请选择图标">
              <template #prefix>
                <i :class="ruleForm.icon"></i>
              </template>
            </el-input>
          </template>
          <el-row :gutter="20">
            <el-col :span="3" v-for="(item,index) in iconData" :key="index">
              <i @click="ruleForm.icon = 'sfont '+ item.value" style="font-size:20px" :class="'sfont '+ item.value"></i>
            </el-col>
          </el-row>
        </el-popover>
      </el-form-item>
      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item label="路由地址" prop="path">
        <el-input v-model="ruleForm.path" placeholder="请输入路径"></el-input>
      </el-form-item>
      <el-form-item v-show="ruleForm.menuType == 1 || ruleForm.menuType ==2" label="组件路径" prop="component">
        <el-input v-model="ruleForm.component" placeholder="请输入组件路径">
          <template v-if="ruleForm.menuType == 2" #prepend>Http://</template>
        </el-input>
      </el-form-item>
      <el-form-item label="上级类目" prop="parentId">
        <el-tree-select style="width:100%" v-model="ruleForm.parentId" :data="menuOptions" check-strictly/>
      </el-form-item>
    </el-form>
  </Layer>
</template>

<script lang="ts" setup>
import {ref, toRefs, reactive, onMounted} from "vue";
import Layer from "@/components/layer/index.vue";
import {superior, update} from "@/api/system/menu";
import {ElMessage} from "element-plus";
import {iconData} from "./icon";

const props = defineProps({
  layer: {
    type: Object,
    default() {
      return {
        show: false,
        title: "",
        showButton: true,
      };
    },
  },
});
const {layer} = toRefs(props);
const emits = defineEmits(["getTableData"]);
const form = ref();

let ruleForm = ref({
  menuType: 1,
  status: true,
  weight: 1,
  isCache: false,
  parentId: '0',
  name: '',
  icon: '',
  path: '',
  component: ''
})

const rules = {
  name: [{required: true, message: "请输入菜单名称", trigger: "blur"}],
  path: [{required: true, message: "请输入路由地址", trigger: "blur"}],
};

const menuOptions = ref([
  {
    value: '0',
    label: '顶级菜单',
  }
])
// 选中图标
const selected = (name: any) => {
  ruleForm.value.icon = name
}

loadMenu()

function loadMenu() {
  let select = '0';
  if (layer.value.row) {
    select = layer.value.row.menuId
  }
  superior(select).then(({data}) => {
    menuOptions.value = data
  })
}

init()

function init() { // 用于判断新增还是编辑功能
  if (props.layer.row) {
    ruleForm.value = JSON.parse(JSON.stringify(props.layer.row)) // 数量量少的直接使用这个转
  } else {

  }
}

const submit = () => {
  form.value.validate((valid: boolean) => {
    if (valid) {
      let params = ruleForm.value;
      if (props.layer.row) {
        updateForm(params);
      } else {
        addForm(params);
      }
    } else {
      return false;
    }
  });
};
// 新增提交事件
const addForm = (params: object) => {
  update(params).then((res) => {
    ElMessage({
      type: "success",
      message: "新增成功",
    });
    layer.value.show = false
    emits("getTableData", true);
  });
};

// 编辑提交事件
const updateForm = (params: object) => {
  update(params).then((res) => {
    ElMessage({
      type: "success",
      message: "编辑成功",
    });
    emits("getTableData", false);
  });
};
</script>

<style lang="scss" scoped>
</style>